<template>
	<view>
		<view class="bubble" :style="{ background: bgColor, color }">
			<view class="tail" :style="{ borderBottom: '5rpx solid ' + bgColor }"></view>
			{{ title.length > 5 ? title.slice(0, 3) + '...' : title }}
		</view>
		<!-- 带有提示框 <div class="bubble">
			<span class="bubble-text">这是一个气泡框！</span>
		</div> -->
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	props: {
		title: {
			type: String,
			default: '会员价',
			required: true
		},
		bgColor: {
			type: String,
			default: 'linear-gradient(0deg, #111111, #333333)',
			// default: '#333333',
			required: false
		},
		color: {
			type: String,
			default: '#edac2f',
			required: false
		}
	}
};
</script>

<style scoped lang="scss">
.bubble {
	margin-left: 15rpx;
	position: relative;
	// width: 60rpx;
	padding: 0 10rpx;
	height: 20rpx;
	border-radius: 10rpx 10rpx 10rpx 0;

	font-weight: 500;
	font-size: 16rpx;
	line-height: 20rpx;
	text-align: center;
	// color: #;
	& > .tail {
		display: inline-block;
		position: absolute;
		bottom: 0%;
		left: -5rpx;
		border: 5rpx solid transparent;
		border-bottom: 5rpx solid #313131;
	}
	position: relative;
	display: inline-block;
	cursor: pointer; /* 使其看起来可交互 */
}

// .bubble {

// }

.bubble-text {
	visibility: hidden; /* 初始隐藏 */
	width: 160px; /* 气泡框宽度 */
	background-color: #555; /* 背景颜色 */
	color: #fff; /* 文字颜色 */
	text-align: center; /* 文字居中 */
	border-radius: 6px; /* 边角圆润 */
	padding: 8px; /* 内边距 */
	position: absolute; /* 绝对定位 */
	z-index: 1; /* 确保在其他元素上面 */
	bottom: 125%; /* 位置：气泡框在上方 */
	left: 50%; /* 水平居中 */
	margin-left: -80px; /* 偏移宽度的一半 */
	opacity: 0; /* 初始透明度 */
	transition: opacity 0.3s; /* 过渡效果 */
}

.bubble:hover .bubble-text {
	visibility: visible; /* 悬停时显示 */
	opacity: 1; /* 变为不透明 */
}

.bubble-text::after {
	content: '';
	position: absolute;
	top: 100%; /* 箭头在气泡框下方 */
	left: 50%; /* 水平居中 */
	margin-left: -5px; /* 偏移箭头宽度的一半 */
	border-width: 5px; /* 箭头大小 */
	border-style: solid;
	border-color: #555 transparent transparent transparent; /* 箭头颜色 */
}
</style>
